//首页的less
html,body{
    width: 100%;
    height: 100%;
}
*{
margin: 0;
padding: 0;
}
body{
  
    display: flex;
    flex-direction: column;
        #nav{
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 44px;
          background: blue;
          .dynamicStatement{
              width: 84px;
              height: 40px;
              line-height: 32px;
              margin-left: 10px;
              text-align:center;
              color: rgba(66, 148, 255, 100);
             font-size: 20px;
             font-family: PingFangSC-bold;;
             border-bottom: 3px solid rgba(170, 217, 247, 100);
          }
          .AddDynamic{
            width: 84px;
            height: 32px;
            line-height: 32px;
            margin-right: 10px;
            text-align: center;
            border-radius: 20px 20px 20px 20px;
            background-color: rgba(170, 217, 247, 100);
            color: rgba(0, 81, 119, 100);
            font-size: 14px;
          }
        }
        #content{
            flex: 1;
            overflow: scroll;
        #substance{
            width: 95%;
            margin: auto;
            display: flex;
            flex-direction: column;
          
            .recommend{
               margin: 5px 0 10px 10px;
                width: 72px;
                height: 25px;
                color: rgba(16, 16, 16, 100);
                font-size: 18px;
                text-align: left;
                font-family: PingFangSC-regular;
            }
            .chocolate{
                width: 100%;
                height: 210px;
                background: #f60;
                margin-bottom: 20px;
                border-radius: 15px;
                border:1px solid #ccc;
                overflow: hidden;
                .vd{
                    width: auto;
                    height: 150px;
                    background: url(../../assets/imgs/course-img04.jpg) no-repeat center;
                    background-size: 100%;
                   
                }
                .chotext1{
                    margin-left: 20px;
                    color: rgba(16, 16, 16, 100);
                    font-size: 16px;
                    text-align: left;
                    font-family: PingFangSC-regular;
                }
                .chotext2{
                    margin:5px 0 0 20px;
                    font-size: 12px;
                    color: rgba(154, 154, 154, 100);
                }
            }
           #user{
            width: 100%;
            height: 452px;
               display: flex;
               flex-direction: column;
               border-bottom: 10px solid #ccc;
               .UserAvatar{
                   display: flex;
                   width: 100%;
                   height: 60px;
                   .ava{
                       width: 60px;
                       height: 60px;
                       border-radius: 50%;
                       border: 1px solid #f60;
                   }
                   .username{
                       margin: 10px 0 0 15px;
                   }
               }
               .usertext{
                   width: auto;              
                   height: 59px;
                   text-align: center;
                font-size: 14px;
                margin-top: 10px;
               }
               .picture{
                   margin-top: 10px;
                   width: 100%;
                   height: 226px;
                   display: flex;
                   justify-content: space-between;
                   align-content: space-between;
                   flex-wrap: wrap;
                   div{
                       width: 118px;
                       height:48%;
                       background: #ccc;
                   }
               }
           }

            
        }

      }
    
    }
    footer{
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 100%;
        height: 77px;
        .icon{
            width: 20%;
            text-align: center;
        }
        .iconfont{
            font-size: 30px;
        }
        div{
            font-size: 16px
        }
    }

    .show{
        display: block
      }
      .active{
        color: skyblue;
      }

